@charset "UTF-8";
@mixin transition($all:all, $speed:0.8s, $ease:ease-in-out) {
    transition-property: $all;
    transition-duration: $speed;
    transition-timing-function: $ease;
    /* Firefox 4 */
    -moz-transition-property: $all;
    -moz-transition-duration: $speed;
    -moz-transition-timing-function: $ease;
    /* Safari  Chrome */
    -webkit-transition-property: $all;
    -webkit-transition-duration: $speed;
    -webkit-transition-timing-function: $ease;
    /* Opera */
    -o-transition-property: $all;
    -o-transition-duration: $speed;
    -o-transition-timing-function: $ease;
}

@mixin inportant_transition($all:all, $speed:0.8s, $ease:ease-in-out) {
    transition-property: $all!important;
    transition-duration: $speed!important;
    transition-timing-function: $ease!important;
    /* Firefox 4 */
    -moz-transition-property: $all!important;
    -moz-transition-duration: $speed!important;
    -moz-transition-timing-function: $ease!important;
    /* Safari  Chrome */
    -webkit-transition-property: $all!important;
    -webkit-transition-duration: $speed!important;
    -webkit-transition-timing-function: $ease!important;
    /* Opera */
    -o-transition-property: $all!important;
    -o-transition-duration: $speed!important;
    -o-transition-timing-function: $ease!important;
}

@mixin opacity($opacity:50) {
    opacity: $opacity / 100;
    filter: alpha(opacity=$opacity);
}

@mixin animation($name:myfirst, $speed:5s, $x:linear, $delay:0s, $count:9999, $alternate:alternate) {
    animation-name: $name;
    animation-duration: $speed;
    animation-timing-function: $x;
    animation-delay: $delay;
    animation-iteration-count: $count;
    animation-direction: $alternate;
    -moz-animation-name: $name;
    -moz-animation-duration: $speed;
    -moz-animation-timing-function: $x;
    -moz-animation-delay: $delay;
    -moz-animation-iteration-count: $count;
    -moz-animation-direction: $alternate;
    -webkit-animation-name: $name;
    -webkit-animation-duration: $speed;
    -webkit-animation-timing-function: $x;
    -webkit-animation-delay: $delay;
    -webkit-animation-iteration-count: $count;
    -webkit-animation-direction: $alternate;
    -o-animation-name: $name;
    -o-animation-duration: $speed;
    -o-animation-timing-function: $x;
    -o-animation-delay: $delay;
    -o-animation-iteration-count: $count;
    -o-animation-direction: $alternate;
}

@mixin delay($delay:2s) {
    transition-delay: $delay;
    /* Firefox 4 */
    -moz-transition-delay: $delay;
    /* Safari  Chrome */
    -webkit-transition-delay: $delay;
    /* Opera */
    -o-transition-delay: $delay;
}

@mixin translate($x:0, $y:0) {
    transform: translate($x, $y);
    -ms-transform: translate($x, $y);
    /* IE 9 */
    -webkit-transform: translate($x, $y);
    /* Safari and Chrome */
    -o-transform: translate($x, $y);
    /* Opera */
    -moz-transform: translate($x, $y);
    /* Firefox */
}
html,body{
    min-height: 100%;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a,
a:hover {
    text-decoration: none;
}

a {
    @include transition($speed: 0.2s);
}

div.img.err {
    background: url("../image/img404.jpg") no-repeat center center;
    border: 1px solid #eee;
    background-color: #fbfbfb;
    img {
        opacity: 0;
    }
}

div.img.ok {
    opacity: 1;
}